<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<style>
  .app {
    margin: 50px auto;
  }

  .parent {
    width: 100%;
    height: 100vh;
    margin: 50px auto;
    background-color: pink;
  }

  .child {
    width: 100%;
    height: 30px;
    margin: 50px auto;
    text-align: center;
    background-color: #ccc;
  }

  table {
    width: 500px;
    margin: 50px auto;
    border: 1px solid #ccc;
    border-collapse: collapse;
    text-align: center;
  }

  table th {
    border: 1px solid #ccc;
  }

  table td {
    border: 1px solid #ccc;
  }
</style>
<script src="../vue.js"></script>

<body>
  <div id="app" class="app">

    <parent></parent>


  </div>

  <!-- 子组件模板 -->
  <template id="child" class="child">
    <div>
      <button @click="clickButton">你点点看</button>
      <!-- <input type="text" name="" id="" v-model="send"> -->
    </div>
  </template>


  <!-- 父组件模板 -->
  <template id="parent-template" class="parent">
    <div>
      <child @childfn="transContent">子组件传来的消息：</child>


      <table>
        <thead>
          <tr>
            <th>班级</th>
            <th>姓名</th>
            <th>性别</th>
            <th>年纪</th>
          </tr>
        </thead>
        <tbody>
          <tr v-for="(item, index) in result" :key=index>
            <td>{{item.grade}}</td>
            <td>{{item.name}}</td>
            <td>{{item.gender ? "male" : "female"}}</td>
            <td>{{item.age}}</td>
          </tr>
        </tbody>
      </table>
    </div>
  </template>

  <script>
    // 注册父组件
    Vue.component("parent", {
      data() {
        return {
          result: [],
        }
      },
      template: "#parent-template",
      methods: {
        transContent(value) {
          this.result = value
        }
      }
    })

    // 注册子组件
    Vue.component("child", {
      data() {
        return {
          send: [{
              grade: "一班",
              name: "zhangsan",
              gender: true,
              age: "18"
            },
            {
              grade: "三班",
              name: "王五",
              gender: true,
              age: "48"
            },
            {
              grade: "二班",
              name: "李四",
              gender: true,
              age: "38"
            },
          ]
        }
      },
      template: "#child",
      methods: {
        clickButton() {
          this.$emit("childfn", this.send)
        }
      }
    })

    var vm = new Vue({
      el: "#app"
    })
  </script>
</body>

</html>